<template>
  <div class="dashboard-panel-detail" id="three3-boxs-member">
    <div class="pages-box">
      <div class="pages-left-child" :class="{ 'pages-left-close': !leftClose }">
        <!-- <div class="flot-btn hw-click-cursor hw-flex-style-c-c" @click="leftClose = !leftClose">
          <t-icon name="caret-left-small" v-if="leftClose" />
          <t-icon name="caret-right-small" v-else />
        </div> -->
        <!-- <div class="page-heard hw-flex-style-b-c"> 
          <span>分组成员</span>
        </div> -->
        <div class="pages-left-content">
          <div class="input-box">
            <t-input placeholder="搜索成员" v-model="name" :onEnter="inputChage" style="margin-bottom: 16px">
              <template #prefixIcon>
                <i class="doorIcon"> &#xe62c; </i>
              </template>
            </t-input>
          </div>
          <div v-for="(item, index) in leftList" :key="index" class="card-item-parent">
            <div
              @click="clickGroup(item.id)"
              class="card-item hw-flex-style-c-c hw-click-cursor"
              :class="{ 'chang-item-active': item.id == cruuent }"
            >
              <div class="card-item-left" v-if="item.name < 11">{{ item.name }}</div>
              <t-popup
                v-else
                attach="#three3-boxs-member"
                overlayClassName="popup"
                class="placement top"
                :content="item.name"
                placement="top"
                showArrow
                destroyOnClose
              >
                <div class="card-item-left">{{ item.name }}</div>
              </t-popup>
              <span class="item-num">{{ item.total }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="ages-right-child">
        <t-card class="dashboard-detail-card" :title="title" :bordered="false">
          <div class="hw-box-end-box">
            <t-button @click="visible1 = true" v-if="store.projectRole == 1">
              <i class="doorIcon">&#xe65c;</i>
              <span>邀请成员</span>
            </t-button>
          </div>
          <unit-table
            :role="store.projectRole"
            :projectId="projectId"
            :tabValue="cruuent"
            :listMembers="listMembers"
            :columns="columns"
            ref="tableref"
          />
        </t-card>
      </div>
      <invite
        v-if="visible1"
        @closes="closes"
        :inviteId="Number(route.query.projectId)"
        :visible="visible1"
        :refType="3"
        :authenticationId="Number(route.query.projectId)"
      ></invite>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import invite from '@/components/invite/invite.vue';
import { groups } from '@/api/project/project';
import unitTable from './components/memberTable.vue';
import { useProjectStore, useUserStore } from '@/store';
import { MessagePlugin } from 'tdesign-vue-next';
import { urls } from '@/utils/request/upload';
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { roleList, BUY_COLUMNS3, leftList } from './components/data';
import { number } from 'echarts/core';

const route = useRoute();
const leftList = ref([]);
const store = useProjectStore();
const data = roleList;
const visible1 = ref(false);
const tableref = ref(null);
const columns = BUY_COLUMNS3;
const userStore = useUserStore();
const cruuent = ref(-1);
const name = ref('');
const projectId = ref(Number(route.query.projectId));

const leftClose = ref(true);
const props = defineProps({
  authenticationId: {
    type: Number,
  },
  inviteIds: {
    type: Number,
  },
});
const init = async () => {
  try {
    let res = await groups(projectId.value, name.value);
    leftList.value = res.data;
  } catch {}
};
const loading = ref(false);
const title = ref('全部成员');
const listMembers = ref([]);
const clickGroup = (e) => {
  cruuent.value = e;
};
const closes = () => {
  visible1.value = false;
};
const inputChage = () => {
  tableref.value.init(name.value);
};
init();
</script>

<style lang="less" scoped>
@import '../../company/index.less';

.pages-box {
  display: flex;
  width: 100%;
  height: calc(100vh - 64px) !important;
}
.pages-left-child {
  width: 284px;
}
.hw-box-end-box {
  justify-content: flex-start;
  // margin-bottom: 12px;
  margin-bottom: 16px;
  .doorIcon {
    color: #fff;
    font-size: 16px;
    margin-right: 6px;
  }
}
.pages-left-content {
  padding: 16px 0px;
  .doorIcon {
    font-size: 24px;

    color: rgba(0, 0, 0, 0.38);
  }
}
.ages-right-child {
  height: 100%;
  margin: 0;
  margin-left: 24px;
  padding: 16px 0;
  padding-right: 24px;
  border: none;
}

.ages-right-child::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
:deep(.t-table__empty) {
  border-bottom: 1px solid #ddd;
}
.card-item-parent {
  display: flex;
  align-items: center;
  height: 44px;
  width: 100%;
}
.card-item {
  display: flex;
  align-items: center;
  padding: 0px 24px;
  width: 100%;
  height: 36px;
  border-radius: 0px;

  .card-item-left {
    width: 190px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item-num {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
    line-height: 22px;
  }
}
.card-item:hover {
  background: #ffece6;
  .card-item-left {
    color: #e62b17;
  }
}
.chang-item-active {
  background: #ffece6;
  .card-item-left {
    color: #e62b17;
  }
}
.chang-item-active:hover {
  background: #ffece6;
}
:deep(.t-card__header) {
  padding: 0;
  height: 36px;
  min-height: 36px;
  display: none;
}
:deep(.t-card__body) {
  padding: 16px 0px;
  padding-top: 0px;
}
.input-box {
  padding: 0 12px;
}
:deep(.t-table__th-cell-inner) {
  display: flex;
  align-items: center;
  height: 32px;
}
#three3-boxs-member {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    // width: 296px;
    font-size: 14px;
    padding: 4px 10px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
</style>
